<template>
  <div class="">
    <el-upload
      :limit="1000000"
      :http-request="upload"
      :show-file-list="false"
      :on-exceed="handleExceed"
      action="''"
      class="upload-demo"
      drag
      multiple
    >
      <div>
        <br />
        <i class="el-icon-folder fileWD" />
        <div class="el-upload__text divSE">
          <em>将文件拖到此处，或点击上传</em>
          <span class="txtUpo">{{ tip }}</span>
        </div>
      </div>
    </el-upload>
    <div class="file-box">
      <div v-for="(item, index) in urlList" :key="index">
        <span class="span-url" @click="look(item)">{{
          fileNameList[index] | ellipsis
        }}</span>
        <i class="el-icon-circle-close" @click="rmImage(index, $event)" />
      </div>
    </div>
  </div>
</template>

<script>
import OSS from "ali-oss";
import {
  oss_accessKeyId,
  oss_accessKeySecret,
  oss_bucket,
  oss_host,
  oss_regionId,
} from "@/api/config";
import { getFileSuffix } from "@/utils/common";
import { Loading } from "element-ui";

export default {
  name: "SingleImageUpload",
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 6) {
        return value.slice(0, 6) + "...";
      }
      return value;
    },
  },
  props: {
    tip: {
      type: String,
      default: "",
    },
    value: {
      type: String,
      default: "",
    },
    maxcount: {
      type: Number,
      default: 1,
    },
    title: {
      type: String,
      default: "",
    },
    format: {
      type: String,
      default: "",
    },
    urls: {
      type: String,
      default: function () {
        return "";
      },
    },
  },
  data() {
    return {
      urlList: [],
      fileNameList: [],
      ossParameter: {
        region: oss_regionId,
        accessKeyId: oss_accessKeyId,
        accessKeySecret: oss_accessKeySecret,
        bucket: oss_bucket,
        host: oss_host,
      },
      loadingId: null,
    };
  },
  mounted() {
    this.showImage();
  },
  methods: {
    handleExceed() {
      this.$message.warning("超出最大上传数量！");
    },
    showImage() {
      if (this.urls !== undefined && this.urls !== "") {
        this.urlList = this.urls.split(",");
        if (this.urlList[this.urlList.length - 1] === undefined) {
          delete this.urlList[this.urlList.length - 1];
        }
      }
    },

    look(item) {
      window.open(item);
    },
    rmAll() {
      this.fileNameList = [];
      this.urlList = [];
    },
    rmImage(index, e) {
      // delete this.urlList[index]
      e.stopPropagation();
      this.urlList.splice(index, 1);
      this.fileNameList.splice(index, 1);
      this.$emit("getImage", this.urlList.join(","));
    },
    upload(item) {
      var hasFile = this.fileNameList.includes(item.file.name);
      if (hasFile) {
        this.$message.error("文件重复");
        return;
      }
      let fileSuffix = getFileSuffix(item.file);
      fileSuffix = fileSuffix.toLowerCase();
      var formatList;
      if (this.format !== "") {
        formatList = this.format.split(",");
        console.log(formatList, "------------------");
        if (formatList.indexOf(fileSuffix) < 0) {
          this.$message.error("只能上传" + this.format + "格式文件");
          return;
        }
      }
      this.loadingId = Loading.service({
        fullscreen: true,
        text: "上传中，请稍等...",
      });
      const that = this;
      const client = new OSS(this.ossParameter);
      // const date = new Date()
      const date = new Date();
      let filename = '/images/' + date.getTime() + '/' + item.file.name
      filename = filename.replace(/,/g,"");
      console.log("upload:" + that.urlList.join(","));
      if (that.urlList.indexOf(that.ossParameter.host + filename) >= 0) {
        this.$message.error(that.ossParameter.host + filename + "已上传");
        that.loadingId.close();
        return;
      }
      client
        .put(filename, item.file)
        .then((response) => {
          const url = that.ossParameter.host + filename;
          // this.urlList = this.urls.split(',')
          that.urlList.push(url);
          that.fileNameList.push(item.file.name);
          that.$emit("getImage", that.urlList.join(","));
          this.loadingId.close();
        })
        .catch((err) => {
          console.log("err:", err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "src/styles/mixin.scss";
.upload-box {
  display: flex;
  align-items: center;
}

.upload-container {
  /*width: 100%;*/
  display: flex;
  justify-content: flex-start;
  // align-items: flex-start;
  position: relative;
  @include clearfix;

  .image-uploader {
    float: left;
  }

  .image-preview {
    width: auto;
    height: 200px;
    display: flex;
    flex-direction: row;
    position: relative;
    border: 1px dashed #d9d9d9;
    float: left;
    margin-left: 50px;

    .image-preview-wrapper {
      position: relative;
      width: auto;
      // margin-left:10px ;
      height: 100%;

      img {
        height: 100%;
      }
    }

    .image-preview-action {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      cursor: default;
      text-align: center;
      color: #fff;
      opacity: 0;
      font-size: 20px;
      background-color: rgba(0, 0, 0, 0.5);
      transition: opacity 0.3s;
      cursor: pointer;
      text-align: center;
      line-height: 200px;

      .el-icon-delete {
        font-size: 36px;
      }
    }

    &:hover {
      .image-preview-action {
        opacity: 1;
      }
    }
  }

  .image-app-preview {
    width: auto;
    height: 180px;
    position: relative;
    border: 1px dashed #d9d9d9;
    float: left;
    margin-left: 50px;

    .app-fake-conver {
      height: 44px;
      position: absolute;
      width: 100%; // background: rgba(0, 0, 0, .1);
      text-align: center;
      line-height: 64px;
      color: #fff;
    }
  }
}

.el-upload-list__item div.filediv {
  width: 100%;
  height: 100%;
}

::v-deep .el-upload-list__item div.filediv img {
  width: 100%;
  max-width: 100%;
}

::v-deep .el-upload__text {
  line-height: 30px;
}
.img_but {
  width: 84px;
  height: 33px;
  color: #5ac6b7;
  border-color: #5ac6b7;
}
.img_div {
  color: #d0d0d0;
  padding-left: 10px;
}
.el-icon-circle-close {
  color: red;
}
.span-url {
  color: #5ac6b7;
}
.file-box {
  display: flex;
  width: 400px;
  flex-wrap: wrap;
  > div > div {
    margin-right: 20px;
  }
}
</style>
